<template>
  <div class="yun-view">
    <div class="yun-filter">
      <el-form size="large" :inline="true">
        <el-form-item label="分类名称">
          <el-input v-model="typeName" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getTypeList">查询</el-button>
          <el-button type="primary" @click="addTypeEvent">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="yun-table">
      <el-table :data="Ydata.typeList" empty-text="暂无数据"   stripe height="600" >
        <el-table-column type="index" label="序号" width="60px"></el-table-column>
        <el-table-column prop="name" label="分类名称" align="center"></el-table-column>
        <el-table-column prop="sort" label="排序" align="center"></el-table-column>
        <el-table-column>
          <template #default="scope">
            <el-button type="text" @click="editEvent(scope.row)">编辑</el-button>
            <el-button type="text" @click="deleteEvent(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="新增/编辑" v-model="dialogVisible" width="400">
      <el-form :model="Ydata.typeInfo" label-width="100">
        <el-form-item label="分类名称">
          <el-input type="text" v-model="Ydata.typeInfo.name" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input type="number" v-model="Ydata.typeInfo.sort"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveTypeInfo">保存</el-button>
          <el-button @click="dialogVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
  
</template>
<script setup>
import {ref,reactive, onMounted, computed} from 'vue'
import {exampleTypeList,exampleTypeAddUpdate,exampleTypeDelete} from '@/api/example.js'
const typeName = ref('')
const Ydata = reactive({
  typeList:[],
  typeInfo:{
  name:"",
  id:null,
  sort:0
}
})
let dialogVisible = ref(false)

onMounted(()=>{
  getTypeList()
})
const getTypeList = async()=>{
  let res = await exampleTypeList({name:typeName.value})
  if(res.code==200){
    Ydata.typeList = res.data||[]
  }
  
}
const addTypeEvent = ()=>{
  Ydata.typeInfo = {
    name:"",
    id:null,
    sort:0
  }
  dialogVisible.value = true
}
const editEvent = (row)=>{
  Ydata.typeInfo = row
  dialogVisible.value = true
}
const saveTypeInfo = async ()=>{
  let res = await exampleTypeAddUpdate(Ydata.typeInfo)
  if(res.code==200){
    ElMessage.success("保存成功")
    dialogVisible.value = false
    getTypeList()
  }

}
const deleteEvent = (row)=>{
  ElMessageBox.confirm(
    '确定删除此条数据吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    let res = await exampleTypeDelete({id:row.id})
    if(res.code==200){
      ElMessage.success("删除成功")
      getTypeList()
    }
  })

}
</script>
<style lang="scss" scoped>
  .yun-view{
    .yun-filter{
      padding:15px 15px 0;
      background: #fff;
      border-radius: 8px;
      margin-bottom:10px;
    }
    .yun-table{
      padding: 15px;
      background: #fff;
      border-radius: 8px;
    }
  }
</style>